﻿import React, { Component} from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import * as utils from '@/utils/index.js'
import { bindActionCreators } from 'redux'
import actionsC from '@/store/actions.js'
import { getCurrentNode } from '@/store/selectors'
import path from 'path'
import PanleWrapper from '@/components/panel/panel-wrapper'
import XInput from '@/components/x-input'
import IconButton from '@material-ui/core/IconButton'
import DeleteIcon from '@material-ui/icons/Delete'
import { observer, inject } from 'mobx-react'

let nodeActions=actionsC()

@inject('rootStore')
@observer
class PanleAttribute extends Component {
	constructor(props) {
		super(props);
		this.state= {
			attr: [
				{
					key: '',
					value: ''
				}
			]
		}
	}
	imgChange(e){
		const { currentPath} = this.props.rootStore
		let src = e.target.value.replace(/\\/g,"/")
		this.props.rootStore.nodeUpdateByPath({
			path: currentPath,
			node:{
				attr: {
					src: `file://${src}`
				}
			}
		});
	}
	handleChange(index, prop, key , e){
		let {attr} = this.state
		if(prop == 'key'){
			attr[index].key = e.target.value
		}
		if(prop == 'value'){
			if(key=='class'){
				attr[index].value = e.target.value.split(' ')
			}else{
				attr[index].value = e.target.value
			}	
		}
		
		this.setState({
			attr: attr
		})
	}
	imgPreviewClick(){
		$(this.refs.imgSelect).click()
	}
	componentWillReceiveProps(nextProp){
		let { currentNode} = nextProp.rootStore;
		let node = currentNode
		node = node?node:{}
		let attr = []
		if(!currentNode.isRoot){
			attr = utils.ObjectToArray(node.attr)
			let attr_str = JSON.stringify(node.attr)
			if(node.tag=='img' && !/"src":/.test(attr_str)){
				attr.push({
					key: 'src',
					value: ''
				})
			}
		}
		
		attr.push({
			key: '',
			value: ''
		})
		this.setState({attr: attr})
	}
	handleItemBlur(){
		const {currentNode, currentPath} = this.props.rootStore
		let node = _.cloneDeep(currentNode)
		node = node ? node:{}
		let attr_obj = utils.ArrayToObject(this.state.attr)
		node.attr = attr_obj
		this.props.rootStore.nodeUpdateByPath({
			path: currentPath,
			node: node
		});
	}
	handleDel(index){
		const {currentNode, currentPath} = this.props.rootStore
		let {attr} = this.state
		delete currentNode.attr[attr[index].key]
		this.props.rootStore.nodeUpdateByPath({
			path: currentPath,
			node: currentNode
		});
	}
	transmitClick(index,e){
		$(e.target).prev().click()
	}
	handleNumSlide(index, val){
		const {currentNode, currentPath, nodeTree} = this.props.rootStore
		let node = _.cloneDeep(currentNode)
		let {attr} = this.state
		attr[index].val = val
		this.setState({
			attr: attr
		})
		let attr_obj = utils.ArrayToObject(this.state.attr)
		node.attr = attr_obj
		this.props.rootStore.nodeUpdateByPath({
			path: currentPath,
			node: node
		});
	}
	render() {
		const {attr} = this.state
		return (
			<PanleWrapper clsName="panel-attribute" panelName="property">
				<ul className="list-wrap">
					{utils.render_list(attr,(item,index)=>{
						switch (item.key){
							case 'src':// if a img
								return(
									<li key={index}>
										<XInput
											type="text"
											value={item.key}
										/>
										<s className="colon">:</s>
										<XInput
											type="text"
											value={item.value}
											onChange={this.handleChange.bind(this, index, 'value', item.key)}
											onBlur={this.handleItemBlur.bind(this)}
										/>
										<IconButton className="iconButton x-icon-btn" onClick={this.transmitClick.bind(this, index)}>
											<input ref="imgSelect" className="trigger" onChange={this.imgChange.bind(this)} type="file" />
											<i className="fa fa-picture-o"></i>
										</IconButton>
									</li>
								)
							default:
								return(
									<li key={index}>
										<XInput
											type="text"
											value={item.key}
											onChange={this.handleChange.bind(this, index, 'key', item.key)}
											onBlur={this.handleItemBlur.bind(this)}
										/>
										<s className="colon">:</s>
										<XInput
											type="text"
											value={item.value}
											onChange={this.handleChange.bind(this, index, 'value', item.key)}
											onBlur={this.handleItemBlur.bind(this)}
											onNumSlide={this.handleNumSlide.bind(this, index)}
										/>
										<IconButton className="iconButton" onClick={this.handleDel.bind(this, index)}>
											<i className="fa fa-trash"></i>
										</IconButton>
									</li>
								)
						}
					})}
				</ul>
			</PanleWrapper>
		)
	}
}

PanleAttribute.defaultProps = {
};

export default PanleAttribute